<template>
  <view class="qr-display">
    <view>收货码请在收货后让配送员扫码或输入收货码，若提 前提供，货物丢失由个人承担</view>
    <view v-if="url">
      <wd-img :src="url" alt="二维码" class="qr-image" width="88px" height="88px"></wd-img>
      <view style="font-weight: bold">{{ code }}</view>
    </view>
    <view v-else>
      <p>正在生成二维码...</p>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getOrderCode } from '@/service/order'
import { ref, onMounted } from 'vue'

interface QRCodeResponse {
  result: {
    qrcodeimg: string
    qrcode: string
  }
}

const props = defineProps({
  orderCode: {
    type: String,
    required: true,
  },
})

const url = ref('')
const code = ref('')
onMounted(() => {
  getOrderCode({ orderCode: props.orderCode }).then((res: QRCodeResponse) => {
    url.value = `data:image/png;base64,${res.result.qrcodeimg}`
    code.value = res.result.qrcode
    console.log(url.value)
  })
})
</script>

<style scoped>
.qr-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

.qr-image {
  width: 100%;
  max-width: 200px;
  height: auto;
}
</style>
